<template>
  <div class="video-display">
    <div class="video-display-1">
      <video
        :src="data.cozVideo"
        controls
        muted
        playsinline
        class="plyr--video"
      ></video>
    </div>
    <div class="kesk-1">
      <div class="kes-1">课程描述:</div>
      <div class="hua-1">《{{ data.cozName }}》</div>

      <div class="kecs-2">
        课程英文名称:<span> {{ data.cozNameEn }}</span>
      </div>
      <div class="kecs-3">
        教师: <span>{{ data.cozTeacherName }}</span>
      </div>

      <div class="kecs-2">
        课程号: <span> {{ data.cozNumber }}</span>
      </div>
      <div class="kecs-3">
        课程开设单位: <span>{{ data.cozOfferingUnit }}</span>
      </div>

      <div class="kc-1">课程简介:</div>
      <div class="kecs-4">
        {{ data.cozIntro }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCourseDetail } from '@/services/user'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
const id: any = ref()
const route = useRoute()
const data: any = ref({})
const getdata = async () => {
  id.value = route.query.id
  const res = await getCourseDetail(id.value)
  data.value = res.data
}

onMounted(() => {
  getdata()
})
</script>

<style lang="scss" scoped>
.video-display {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.plyr--video {
  width: 100%;
  height: 100%;
  border: none; /* 去除边框 */
}
.kes-1 {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-bottom: 13px;
}
.video-display-1 {
  width: 100%;
  height: 210px;
  background: linear-gradient(214deg, #666666 0%, #000000 100%);
  box-sizing: border-box;
}
.kesk-1 {
  width: 100%;
  min-height: 300px;
  padding: 10px;
  box-sizing: border-box;
}
.hua-1 {
  width: 100%;
  font-weight: 600;
  font-size: 21px;
  color: #333333;
  margin-bottom: 10px;
}

.kecs-2 {
  margin-right: 23px;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  span {
    color: #666666;
    font-size: 14px;
  }
}
.kecs-3 {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  span {
    color: #666666;
    font-size: 14px;
  }
}
.kc-1 {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10px;
}
.kecs-4 {
  font-size: 12px;
  color: #333333;
}
</style>
